import { Row, Col, Input, Modal, DatePicker } from 'antd';
import React, { useState } from 'react';
import './note.css'
import {
    PlusOutlined,
    InfoCircleOutlined,
    DeleteOutlined,
    EditOutlined,
    SearchOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
const { confirm } = Modal;
const App = () => {
    const [value, setValue] = useState(null);
    const onChange = (time) => {
        setValue(time);
    };
    return (
        <>
            <div className='create'>
                <Row>
                    <div className='last'>
                        <div className='title'>
                            <Col flex={23} className='left'>
                                <span className='type'><InfoCircleOutlined /> 标题</span>
                            </Col>
                            <Col flex={1} className='right'>
                                <span className='edit'><EditOutlined /> 编辑标题</span>
                            </Col>
                        </div>
                        <div className='chose'>
                            <div className='choseType'>
                                <Input placeholder="请输入标题（8字以内）" maxLength={8} />
                            </div>
                        </div>

                        <div className='title'>
                            <Col flex={23} className='left'>
                                <span className='type'><InfoCircleOutlined /> 描述</span>
                            </Col>
                            <Col flex={1} className='right'>
                                <span className='edit'><EditOutlined /> 编辑描述</span>
                            </Col>
                        </div>
                        <div className='chose'>
                            <div className='choseType'>
                                <Input placeholder="请输入描述（15字以内）" maxLength={15} />
                            </div>
                        </div>
                    </div>
                </Row>
                <Row>
                    <div className='last'>
                        <div className='title'>
                            <Col flex={23} className='left'>
                                <span className='type'><InfoCircleOutlined /> 内容</span>
                            </Col>
                            <Col flex={1} className='right'>
                                <span className='edit'><EditOutlined /> 编辑内容</span>

                            </Col>
                        </div>
                        <div className='chose'>
                            <div className='choseType'>
                                <Input placeholder="请输入内容（20字以内）" maxLength={20} />
                            </div>
                        </div>
                        <div className='title'>
                            <Col flex={23} className='left'>
                                <span className='type'><InfoCircleOutlined /> 创建者</span>
                            </Col>
                            <Col flex={1} className='right'>
                                <span className='edit'><EditOutlined /> 编辑内容</span>
                            </Col>
                        </div>
                        <div className='chose'>
                            <div className='choseType'>
                                <Input placeholder="请输入创建者" maxLength={4} />
                            </div>
                        </div>
                    </div>
                </Row>
                <Row>
                    <div className='last'>
                        <div className='title'>
                            <Col className='left'>
                                <span className='type'><InfoCircleOutlined /> 创建时间</span>
                            </Col>
                        </div>
                        <div className='chose'>
                            <div className='choseType'>
                                <DatePicker value={value} onChange={onChange} />
                            </div>
                        </div>
                    </div>
                </Row>
            </div >
        </>

    );
};

export default App;
